import React from 'react';
import { Row, Col, Switch, Button, Select, InputNumber } from 'antd';
/**
 * @Component WarningRuleItem
 *
 **/

export default function WarningRuleItem(props) {
  const itemValue = props.value || {};
  // 获取当前var
  const find = props.variable.find((o) => {
    return o.code === itemValue.condition.left_var_type;
  });
  // 周期
  const range = find ? find.cycle.map(({ code, name }) => ({ key: code, value: name })) : [];
  // 操作符
  const ch = find ? find.children : [];
  const findChildren = ch.find(({ code }) => itemValue.condition.left_var_value === code) || {};
  const operator = (findChildren.operator || []).map((o) => ({
    key: o,
    value: o,
  }));

  // 值
  const values = (findChildren.enum || []).map(({ code, name }) => ({
    key: code,
    value: name,
  }));

  // 是否启用
  const changeEnabled = (value) => {
    itemValue.status = +value;
    props.onChange && props.onChange(itemValue);
  };

  // 周期
  const changeCycle = (value) => {
    itemValue.cycle = value;
    props.onChange && props.onChange(itemValue);
  };

  // 左值第一个输入框，type
  const changeLeftType = (value) => {
    // 清空右侧值
    for (let k in itemValue.condition) {
      itemValue.condition[k] = '';
    }
    itemValue.cycle = '';
    itemValue.condition.left_var_type = value;
    props.onChange && props.onChange(itemValue);
  };

  // 左值第二个输入框，value
  const changeLeftValue = (value) => {
    itemValue.condition.left_var_value = value;
    const leftTypeCur = props.variable.find((it) => it.code === itemValue.condition.left_var_type);
    const leftValueOptions = (leftTypeCur && leftTypeCur.children) || [];
    const valueCur = leftValueOptions.find((it) => it.code === value);
    //如果类型变化了，则重置right的值。
    itemValue.condition.right_var_value =
      itemValue.condition.varTypeLimit !== valueCur.varTypeLimit ? undefined : valueCur.right_var_value;
    itemValue.condition.varTypeLimit = valueCur.varTypeLimit;
    itemValue.condition.right_var_unit = valueCur.unit;
    // 重置周期
    itemValue.cycle = '';
    // 重置操作符
    itemValue.condition.operator = '';

    props.onChange && props.onChange(itemValue);
  };

  //操作符
  const changeOperator = (value) => {
    itemValue.condition.operator = value;
    props.onChange && props.onChange(itemValue);
  };

  //右值
  const changeRightValue = (value) => {
    itemValue.condition.right_var_value = value;
    props.onChange && props.onChange(itemValue);
  };

  const leftTypeCur = props.variable.find((it) => it.code === itemValue.condition.left_var_type);
  const leftValueOptions = (leftTypeCur && leftTypeCur.children) || [];
  return (
    <>
      <Row type='flex' justify='space-between' align='middle' gutter={10} className='rule-item'>
        <Col span={6}>
          <Row gutter={10}>
            <Col span={12}>
              <Select onChange={changeLeftType} value={itemValue.condition.left_var_type}>
                {props.variable.map((it) => {
                  return (
                    <Select.Option value={it.code} key={it.code}>
                      {it.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Col>
            <Col span={12}>
              <Select onChange={changeLeftValue} value={itemValue.condition.left_var_value}>
                {leftValueOptions.map((it) => {
                  return (
                    <Select.Option value={it.code} key={it.code}>
                      {it.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={4}>
          <Select value={itemValue.cycle} onChange={changeCycle}>
            {range.map((it) => {
              return (
                <Select.Option value={it.key} key={it.key}>
                  {it.value}
                </Select.Option>
              );
            })}
          </Select>
        </Col>
        <Col span={8}>
          <Row gutter={10}>
            <Col span={12}>
              <Select value={itemValue.condition.operator} onChange={changeOperator}>
                {operator.map((it) => {
                  return (
                    <Select.Option value={it.key} key={it.key}>
                      {it.value}
                    </Select.Option>
                  );
                })}
              </Select>
            </Col>
            <Col span={12}>
              {itemValue.condition.varTypeLimit === 'enum' && (
                <Select onChange={changeRightValue} value={itemValue.condition.right_var_value}>
                  {values.map((it) => {
                    return (
                      <Select.Option value={it.key} key={it.key}>
                        {it.value}
                      </Select.Option>
                    );
                  })}
                </Select>
              )}
              {itemValue.condition.varTypeLimit === 'integer' && (
                <>
                  <InputNumber
                    value={itemValue.condition.right_var_value}
                    style={{ width: '100%' }}
                    formatter={(value) => `${value}${itemValue.condition.right_var_unit}`}
                    min={0}
                    step={1}
                    onChange={changeRightValue}
                  />
                </>
              )}
            </Col>
          </Row>
        </Col>

        <Col span={2}>
          {!props.disabled ? (
            <Switch checked={itemValue.status === 1} onChange={changeEnabled} />
          ) : itemValue.status === 1 ? (
            '启用'
          ) : (
            '禁用'
          )}
        </Col>

        {!props.disabled && (
          <Col span={4}>
            <Button type='link' onClick={() => props.onDel && props.onDel()}>
              删除
            </Button>
          </Col>
        )}
      </Row>
    </>
  );
}
